<template>
    <div>
        <Header :theme="true"></Header>
        <div class="main">
            <van-grid clickable :column-num="2">
                <van-grid-item icon="home-o" text="翻译" to="/translateDetail/1" />
                <van-grid-item icon="other-pay" text="场景对话" to="/translateDetail/2" />
                <van-grid-item icon="chat-o" text="口语对话" to="/translateDetail/3" />
                <van-grid-item icon="bullhorn-o" text="语音输入" to="/translateDetail/4" />
            </van-grid>
            <div class="re-sentence">
                <div class="title">每日短句推送</div>
                <van-card v-for="item in 6" :key="item" desc="If you work hard, you can't admit defeat." title="日益努力，而后风生水起，众生皆苦，你也不能认输。"
                    thumb="https://pic4.zhimg.com/80/v2-3bcedd4008a01b66e159dc4f8a27388b_720w.webp" />
            </div>
        </div>
    </div>
</template>

<script setup>
import Header from "../components/Header.vue";
</script>

<style scoped>
.main {
    height: 100%;
    margin: 50px 0;
    background-color: #fff;
}
.re-sentence {
    margin: 20px 0;
}
.re-sentence .title {
    padding: 15px 10px;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    border-radius: 100% 0 100% 0;
    background: linear-gradient(to right, #0080ff, #00d5ff);
}
</style>